<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorator="layout">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
</head>
<body>
<!-- Begin Page Content -->
<div class="container-fluid mt-4" layout:fragment="content">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                搜索&添加
                <span id="operators_pack_btn" style="cursor: pointer"><i class="fas fa-angle-up"></i></span>
            </h6>
        </div>
        <div class="card-body" id="operators_panel">
            <!--<div id="operators_panel">-->
            <div class="row screen-group">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                    <label>权限名：</label>
                    <input class="form-control" type="text" id="authname"/>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                    <label>描述：</label>
                    <input class="form-control" type="text" id="description"/>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">

                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">
                    <button type="button" class="btn btn-secondary btn-block btn-bottom" id="add">新增</button>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">
                    <button type="button" class="btn btn-primary btn-block btn-bottom" id="searchBt">搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!--数据-->
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                数据
                <!--<a href="#" style="float:right;font-weight: normal;">下载</a>-->
                <button type="button" class="btn btn-link" style="float:right;font-weight: normal;display: none;">下载</button>
            </h6>

        </div>
        <div class="card-body">
            <div class="table-responsive" id="data">
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit_body" tabindex="-1" role="dialog" aria-labelledby="menu_examine_lable" aria-hidden="true" style="z-index: 1051">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="menu_examine_lable">权限修改</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="menuClasify-detailed" data-id='' data-restaurantId="">
                        <form class="form-horizontal">
                            <input id="editUrl" type="hidden"/>
                            <input id="editId" type="hidden"/>
                            <div class="form-group">
                                <label class="control-label">权限名：</label>
                                <input type="text" class="form-control" id="auth_authname" placeholder="" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="">
                            </div>

                            <div class="form-group">
                                <label class="control-label">描述：</label>
                                <input type="text" class="form-control" id="auth_description" placeholder="" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="">
                            </div>

                            <div class="form-group">
                                <label class="control-label">匹配路径(多个用逗号分开)：</label>
                                <input type="text" class="form-control" id="auth_patterns" placeholder="" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary preserve-btn" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block layout:fragment="js">
    <script type="text/javascript">
        // var csrfToken = $("meta[name='_csrf']").attr("content");
        $(function(){
            $("#operators_pack_btn").click(function () {
                if ($("#operators_panel").is(":hidden")) {
                    $("#operators_panel").show(100);
                    $(this).html("<i class=\"fas fa-angle-up\"></i>");
                } else {
                    $("#operators_panel").hide(100);
                    $(this).html("<i class=\"fas fa-angle-down\"></i>");
                }
            });

            $("#searchBt").click(function(){
                search();
            });
            search();
            $("#add").click(function(){
                $("#menu_examine_lable").html("权限添加");
                edit(0,"","","","system/auth/add")
            })
            $("#description ").keyEnterEvent(search);
            $("#authname").keyEnterEvent(search);
        });

        function search(){
            var data={
                authname:$("#authname").val(),
                description:$("#description").val(),
//          operatename:$("#operatename").val(),
//          description:$("#description").val(),
//          aip: $("#aip").val(),
//          beginTime:$("#beginTime").val(),
//          endTime:$("#endTime").val(),
//        max:10
                '_csrf':csrfToken
            };
            $("#data").datagrid("load",{
                url:"[[@{/system/auth/search}]]",
                data:data,
                showDetail:true,
                colResizeEnable:true,
                fields:[
                    {name:"id",autoHidden:true,text:"ID",inTable:false},
                    {name:"authname",autoHidden:false,text:"权限名",inTable:true},
                    {name:"description",autoHidden:true,text:"描述",inTable:true,render:function(row){
                            if(row.description == null){
                                return "";
                            }else {
                                return row.description;
                            }

                        }},
                    {name:"patterns",autoHidden:false,text:"匹配路径",inTable:true},

                ],
                operations:[
                    {name:"edit",autoHidden:false,text:"修改",inTable:true,handler:function(row){
                            $("#menu_examine_lable").html("权限修改");
                            edit(row.id,row.authname,row.description,row.patterns,"system/auth/edit");
                        }},
                    {name:"remove",autoHidden:false,text:"删除",inTable:true,handler:function(row){
                            var pp=prompt("确定要删除【"+row.authname+"】吗？请输入‘确定’","");
                            if(pp != null){
                                if(pp=="确定"){
                                    del(row.id);
                                }else{
                                    alert("输入错误！");
                                }
                            }
                        }}
                ],
                dialogTitle:"操作日志",
                webContext:webContext
            });
        }
        function del(id){
            $.doSubmit({
                submitUrl:"[[@{/system/auth/del}]]",
                data:{id:id,'_csrf':csrfToken},
                type:"post",
                callBack:function(response){
                    if(response){
                        search()
                    }else{
                        alert("删除失败");
                    }
                },
                webContext:'[[@{/}]]'
            });
        }
        function edit(id,authname,description,patterns,url){
            $("#edit_body").modal("show");
            $("#auth_authname").val(authname);
            $("#auth_description").val(description);
            $("#auth_patterns").val(patterns)
            $("#editUrl").val(url);
            $("#editId").val(id);
            $("#save").off();
            $("#save").on("click",function(){
                window.focus=null;
                if($("#auth_authname").val()==""){
                    alert("权限名称不能为空！")
                    return;
                }
                if($("#auth_description").val()==""){
                    alert("权限描述不能为空！")
                    return;
                }
                $.doSubmit({
                    submitUrl:"[[@{/}]]"+$("#editUrl").val(),
                    data:{"id":$("#editId").val(),"authname":$("#auth_authname").val(),"description":$("#auth_description").val(),"patterns":$("#auth_patterns").val(),
                        '_csrf':csrfToken},
                    type:"post",
                    callBack:function(response){
                        var srb= $.parseJSON(response);
                        var msg = "";
                        if(srb.ok){
                            var postUrl = $("#editUrl").val();
                            if (postUrl.indexOf("add") > -1) {//添加
                                $("#data").datagrid("loadLastPage");
                            } else {//修改
                                $("#data").datagrid("reload");
                            }
                            $("#edit_body").modal("hide");
                            // search();
                            // $("#edit_body").modal("hide");
                        }else{
                            msg += srb.msg;
                            alert(msg);
                            //alert(response);
                        }
                    },
                    webContext:webContext
                });
            })
        }
    </script>
</th:block>
</body>
</html>